<template>
  <div class="addContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <template #header>
            <span style="font-weight: bold; font-size: 16px">新增入库</span>
          </template>
          <div class="addBody">
            <div class="basicInfoContainer">
              <div class="milestone">
                <div class="milestone-content">基础信息</div>
              </div>
              <el-form
                style="margin-top: 40px"
                label-width="120"
                :model="productForm"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入库单编号">
                      <el-input
                        v-model="productForm.storageCode"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="入库单名称">
                      <el-input
                        v-model="productForm.storageName"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="入库日期">
                      <el-date-picker
                        v-model="productForm.storageDate"
                        style="width: 300px"
                        type="date"
                        placeholder="请选择日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工单名称">
                      <el-input
                        v-model="productForm.workOrderName"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工单编号">
                      <el-input
                        v-model="productForm.workOrderCode"
                        placeholder="请输入"
                        style="width: 300px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="备注">
                  <el-input
                    v-model="productForm.remark"
                    type="textarea"
                    style="width: 820px"
                    rows="4"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="bomContainer">
              <div class="bomInfoContainer">
                <div class="milestone">
                  <div class="milestone-content">入库明细</div>
                </div>
                <el-form style="margin-top: 40px" label-width="120">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="产品名称">
                        <el-input
                          v-model="productForm.productName"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="产品编号">
                        <el-input
                          v-model="productForm.productCode"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="规格型号">
                        <el-input
                          v-model="productForm.specification"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-form-item label="产品类型">
                      <el-select
                        v-model="productForm.productType"
                        placeholder="请选择产品类型"
                        style="width: 300px"
                      >
                        <el-option value="成品" label="成品"></el-option>
                        <el-option value="半成品" label="半成品"></el-option>
                        <el-option value="其他" label="其他"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="单位">
                        <el-input
                          v-model="productForm.unit"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="批次号">
                        <el-input
                          v-model="productForm.batchNumber"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="入库数量">
                        <el-input
                          v-model="productForm.quantity"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="生产日期">
                        <el-date-picker
                          v-model="productForm.productDate"
                          style="width: 300px"
                          type="date"
                          placeholder="请选择日期"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="到期日期">
                        <el-date-picker
                          v-model="productForm.endDate"
                          style="width: 300px"
                          type="date"
                          placeholder="请选择日期"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="仓库名称">
                        <el-input
                          v-model="productForm.warehouseName"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="负责人">
                        <el-input
                          v-model="productForm.leader"
                          placeholder="请输入"
                          style="width: 300px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
        <el-button type="primary" style="width: 80px" @click="handleSubmit"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { dayjs, ElMessage } from "element-plus";
import { productStorageAddParamsType } from "@/api/productStorage/params";
import { postproductStorageAddApi } from "@/api/productStorage";

const $router = useRouter();

const productForm = ref<productStorageAddParamsType>({
  productlistId: "",
  storageName: "",
  storageCode: "",
  storageDate: "",
  workOrderName: "",
  workOrderCode: "",
  productName: "",
  productCode: "",
  specification: "",
  unit: "",
  batchNumber: "",
  quantity: "",
  warehouseName: "",
  areaName: "库区二",
  locationName: "库位02",
  status: "",
  remark: "",
  leader: "",
  productDate: "",
  endDate: "",
  productType: "",
});
const isFooterVisible = ref(false);

onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
});

const close = () => {
  $router.replace("/storage/entrance/product");
};

const handleSubmit = async () => {
  try {
    const res = await postproductStorageAddApi({
      productlistId: productForm.value.productlistId,
      storageName: productForm.value.storageName,
      storageCode: productForm.value.storageCode,
      storageDate: dayjs(productForm.value.storageDate).format("YYYY-MM-DD"),
      workOrderName: productForm.value.workOrderName,
      workOrderCode: productForm.value.workOrderCode,
      productName: productForm.value.productName,
      productCode: productForm.value.productCode,
      specification: productForm.value.specification,
      unit: productForm.value.unit,
      batchNumber: productForm.value.batchNumber,
      quantity: productForm.value.quantity,
      warehouseName: productForm.value.warehouseName,
      areaName: productForm.value.areaName,
      locationName: productForm.value.locationName,
      status: productForm.value.status,
      productDate: dayjs(productForm.value.productDate).format("YYYY-MM-DD"),
      endDate: dayjs(productForm.value.endDate).format("YYYY-MM-DD"),
      leader: productForm.value.leader,
      remark: productForm.value.remark,
      productType: productForm.value.productType,
    });

    ElMessage.success("新增成功");
    console.log(res);
    $router.replace("/storage/entrance/product");
  } catch (err: any) {
    console.error(err);
    ElMessage.error("新增失败", err);
  }
};
</script>

  <style scoped lang="scss">
.addContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .addBody {
    width: 100%;
    .basicInfoContainer,
    .bomInfoContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .bomInfoContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>